<template>
  <!-- <t-tabs v-model="value"> -->
    <!-- <t-tab-panel value="first" label="外观" :destroyOnHide="false"> -->
      <t-collapse defaultExpandAll="true" borderless="true" @change="handlePanelChange">
        <t-collapse-panel value="0" header="对齐(参照框)">
          <div class="iconDiv">
            <i
              v-for="item in alignment"
              :key="item.type"
              :title="item.title"
              :class="['iconfont', item.icon]"
              @click="handleAlignmentFun(item.type)"
            ></i>
          </div>
        </t-collapse-panel>
        <t-collapse-panel value="1" header="对齐(参照第一个选中节点)">
          <div class="iconDiv">
            <i
              v-for="item in alignmentFirst"
              :key="item.type"
              :title="item.title"
              :class="['iconfont', item.icon]"
              @click="handleAlignmentFirstFun(item.type)"
            ></i>
          </div>
        </t-collapse-panel>
        <t-collapse-panel value="2" header="对齐(参照最后一个选中节点)">
          <div class="iconDiv">
            <i
              v-for="item in alignmentLast"
              :key="item.type"
              :title="item.title"
              :class="['iconfont', item.icon]"
              @click="handleAlignmentLastFun(item.type)"
            ></i>
          </div>
        </t-collapse-panel>
      </t-collapse>
    <!-- </t-tab-panel>
    <t-tab-panel value="third" label="结构">
      <p slot="panel" style="padding: 25px">选项卡3的内容，使用 t-tab-panel 渲染</p>
    </t-tab-panel>
  </t-tabs> -->
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Pen } from '@meta2d/core';
import { useSelection } from '../../../services/selections';

const { selections } = useSelection();

const value = ref('first');

const handlePanelChange = (val: any) => {
  console.log(val);
};

const alignment = [
  { type: 'left', title: '左对齐', icon: "icon-Meta2djuzuoduiqi" },
  { type: 'right', title: '右对齐', icon: "icon-Meta2djuyouduiqi" },
  { type: 'top', title: '顶部对齐', icon: "icon-Meta2djushangduiqi" },
  { type: 'bottom', title: '底部对齐', icon: "icon-Meta2djuxiaduiqi" },
  { type: 'center', title: '垂直居中', icon: "icon-Meta2dzuoyoujuzhongduiqi" },
  { type: 'middle', title: '水平居中', icon: "icon-Meta2dshangxiajuzhongduiqi" },
  { type: 'spaceBetween', title: '等距分部、左右对齐', icon: "icon-Meta2dshuipingdengfen fontSize" },
  { type: 'spaceBetweenColumn', title: '等距分部、上下对齐', icon: "icon-Meta2dshuipingdengfen1 fontSize" },
]
const alignmentFirst = [
  { type: 'left', title: '左对齐', icon: "icon-Meta2djuzuoduiqi" },
  { type: 'right', title: '右对齐', icon: "icon-Meta2djuyouduiqi" },
  { type: 'top', title: '顶部对齐', icon: "icon-Meta2djushangduiqi" },
  { type: 'bottom', title: '底部对齐', icon: "icon-Meta2djuxiaduiqi" },
  { type: 'center', title: '垂直居中', icon: "icon-Meta2dzuoyoujuzhongduiqi" },
  { type: 'middle', title: '水平居中', icon: "icon-Meta2dshangxiajuzhongduiqi" },
  { type: 'beSame', title: '相同大小', icon: "icon-Meta2dfuzhi fontSize" },
  { type: 'formatPainter', title: '格式刷', icon: "icon-Meta2da-geshishua2 fontSize" },
]
const alignmentLast = [
  { type: 'left', title: '左对齐', icon: "icon-Meta2djuzuoduiqi" },
  { type: 'right', title: '右对齐', icon: "icon-Meta2djuyouduiqi" },
  { type: 'top', title: '顶部对齐', icon: "icon-Meta2djushangduiqi" },
  { type: 'bottom', title: '底部对齐', icon: "icon-Meta2djuxiaduiqi" },
  { type: 'center', title: '垂直居中', icon: "icon-Meta2dzuoyoujuzhongduiqi" },
  { type: 'middle', title: '水平居中', icon: "icon-Meta2dshangxiajuzhongduiqi" },
  { type: 'beSame', title: '相同大小', icon: "icon-Meta2dfuzhi fontSize" },
  { type: 'formatPainter', title: '格式刷', icon: "icon-Meta2da-geshishua2 fontSize" },
]

const handleAlignmentFun = (type:string) => {
  if(type === 'spaceBetween') {
    meta2d.spaceBetween(selections.pen as Pen[]);
  } else if(type === 'spaceBetweenColumn') {
    meta2d.spaceBetweenColumn(selections.pen as Pen[]);
  } else {
    meta2d.alignNodes(type, selections.pen as Pen[]);
  }
}
const handleAlignmentFirstFun = (type:string) => {
  if(type === 'beSame') {
    meta2d.beSameByFirst(selections.pen as Pen[]);
  } else if(type === 'formatPainter') {
    meta2d.formatPainterByFirst(selections.pen as Pen[]);
  } else {
    meta2d.alignNodesByFirst(type, selections.pen as Pen[]);
  }
}
const handleAlignmentLastFun = (type:string) => {
  if(type === 'beSame') {
    meta2d.beSameByLast(selections.pen as Pen[]);
  } else if(type === 'formatPainter') {
    meta2d.formatPainterByLast(selections.pen as Pen[]);
  } else {
    meta2d.alignNodesByLast(type, selections.pen as Pen[]);
  }
}

</script>

<style lang="scss" scoped>
  :deep(.t-collapse-panel__wrapper) {
    border-bottom: solid 1px var(--td-component-border);
    .t-collapse-panel__content {
      padding: 8px 12px;
      .iconDiv {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .iconfont {
          color: #666666;
          font-size: 24px;
          cursor: pointer;
        }
        .fontSize {
          font-size: 18px;
        }
      }
      
    }
  }
</style>